<template>
  <div class="test-user-list">
    <Search @search="search" @reset="reset" @add="add" @bacthDelete="bacthDelete"></Search>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        align="center"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        align="center"
        prop="age"
        label="年龄"
        width="120">
      </el-table-column>
      <el-table-column
        align="center"
        prop="sex"
        label="性别"
        width="120">
         <template slot-scope="scope">
          {{scope.row.sex == '0'?'男':'女'}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="address"
        label="地址"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.province}}
          {{scope.row.city}}
          {{scope.row.area}}
          {{scope.row.address}}
        </template>
      </el-table-column>
       <el-table-column
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
        <i @click="view(scope.row.id)" class="el-icon-view viewIconClass"></i>
        <i @click="edit(scope.row.id)" class="el-icon-edit editIconClass"></i>
        <i @click="del(scope.row.id)"  class="el-icon-delete deleteIconClass"></i>
      </template>
      </el-table-column>
    </el-table>
    <MyPagination :pagination="pagination" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></MyPagination>
  </div>
</template>

<script>
import {postRequest} from '../../util/http'
import Search from '../../view/commodity/search'
import MyPagination from '../../components/pagination/myPagination'
export default {
  name: 'UserList',
  components: {
    Search,
    MyPagination
  },
  data () {
    return {
      pagination: { // 分页组件参数
        total: 0,
        currentPage: this.current,
        pageSize: this.size
      },
      param: { // 分页接口参数
        current: 1,
        size: 10,
        keyWord: ''
      },
      bacthDeleteIds: [], // 批量删除ids
      tableData: [] // 表格数组
    }
  },
  created () {
    this.init()
  },
  methods: {
    // 多选框方法
    handleSelectionChange (val) {
      if (val != null && val.length > 0) {
        this.bacthDeleteIds = val.map(item => item.id)
      } else {
        this.bacthDeleteIds = val
      }
    },
    // 初始化
    init () {
      this.page()
    },
    // 分页方法
    async page () {
      let res = await postRequest('/testUser/list', this.param)
      this.tableData = res.data.records
      this.pagination.total = res.data.total
    },
    // 切换分页方法
    handleCurrentChange (current) {
      this.param.current = current
      this.page()
    },
    // 切换分页大小方法
    handleSizeChange (size) {
      this.param.size = size
      this.page()
    },
    // 搜索
    search (param) {
      this.param.keyWord = param.keyWord
      this.page()
    },
    // 重置
    reset () {
      this.param.keyWord = ''
      this.param.current = 1
      this.param.size = 10
      this.page()
    },
    // 添加
    add () {
      this.$router.push({path: '/testUser/add', query: {type: 1}})
    },
    // 编辑
    edit (id) {
      this.$router.push({path: '/testUser/edit', query: {type: 2, id: id}})
    },
    // 删除
    async del (id) {
      let res = await postRequest('/testUser/delete', {ids: [id]})
      this.$message({
        message: res.data ? '删除成功' : '删除失败',
        type: 'success'
      })
      this.reset()
    },
    // 批量删除
    async bacthDelete () {
      if (this.bacthDeleteIds != null && this.bacthDeleteIds.length > 0) {
        let res = await postRequest('/testUser/delete', {ids: this.bacthDeleteIds})
        this.$message({
          message: res.data ? '批量删除成功' : '批量删除失败',
          type: 'success'
        })
        this.reset()
      } else {
        this.$message({
          message: '请先选择要删除的用户!',
          type: 'warning'
        })
      }
    },
    // 详情
    async view (id) {
      this.$router.push({path: '/testUser/view', query: {id: id}})
    }
  }
}
</script>

<style>
.el-table .cell{
  line-height: 2rem;
}
</style>
